<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* div {
        width: 200px;
        height: 200px;
        background-image: linear-gradient(to left, red 20%, blue 13%);
    } */
    /* div {
        width: 200px;
        height: 220px;
        background-image: repeating-linear-gradient(red 0%, green 25%);
    } */

    /* div {
        width: 50px;
        height: 100px;
        background-color: aqua;
        transition: all 3s linear;
    }

    div:hover {
        width: 200px;
        height: 600px;
        background-color: rgb(92, 0, 251);
    } */
    /* div {
        column-count: 3;
    } */

    .out {
        margin: 600px auto;
        width: 300px;
        height: 300px;
        position: relative;
        transform-style: preserve-3d;
        perspective: 1000px;
        transform: rotateX(345deg);
    }

    .inn {
        width: 300px;
        height: 300px;
        position: absolute;
        transform: translateZ(800px);
        transition: 1s;
    }

    img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="out">
        <div class="inn"><img src="./images/0.png" alt=""></div>
        <div class="inn"><img src="./images/1.png" alt=""></div>
        <div class="inn"><img src="./images/2.png" alt=""></div>
        <div class="inn"><img src="./images/3.png" alt=""></div>
        <div class="inn"><img src="./images/4.png" alt=""></div>
        <div class="inn"><img src="./images/5.png" alt=""></div>
        <div class="inn"><img src="./images/6.png" alt=""></div>
        <div class="inn"><img src="./images/7.png" alt=""></div>
        <div class="inn"><img src="./images/8.png" alt=""></div>
        <div class="inn"><img src="./images/9.png" alt=""></div>
    </div>
</body>
<script>
    var num = 0;
    var oInn = document.querySelectorAll(".inn");

    function change() {
        for (var i = 0; i < oInn.length; i++) {
            var img_num = Math.floor(Math.random() * (13 - 0 + 1))
            oInn[i].innerHTML = `<img src="./images/${img_num}.png" alt="">`
        }
    }

    change();


    console.log(oInn);
    for (var i = 0; i < oInn.length; i++) {
        oInn[i].style.transform = `rotateY(${i*360/oInn.length}deg) translateZ(700px)`
    }


    var timer = setInterval(function () {
        num++
        for (var i = 0; i < oInn.length; i++) {
            oInn[i].style.transform = `rotateY(${i*360/oInn.length+num*360/oInn.length}deg) translateZ(700px)`
        }
        if (num == oInn.length - 1) {
            change();
            num = 0;
        }
    }, 1500)
</script>

</html>